@import (reference) "~ui/styles/mixins";
@import (reference) "~ui/styles/variables";

body { overflow-x: hidden; }

.app-links-wrapper {
  width: @as-open-width;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  background-color: @app-links-wrapper-background;
  overflow: hidden;
  transition: width @transition-time;
  transition-delay: @transition-delay;

  &:hover {
    .app-title {
      display: inline-block;
    }
    + .app-wrapper {
      transform: translateX(@as-open-width - @as-closed-width);
    }
  }

  .logo-small,
  .logo {
    height: 70px;
    width: @as-open-width;
    list-style-type: none;
    &.kibana {
      background-image: url("~ui/images/kibana.svg");
      background-position: 6px 10px;
      background-size: 140px 50px;
      background-repeat: no-repeat;
      background-color: #e8488b;
    }
  }

  .bottom-apps {
    position: absolute;
    bottom: 0;
  }
}

.app-wrapper {
  .real-flex-parent();
  position: absolute;
  transition: transform @transition-time;
  transition-delay: @transition-delay;
  left: @as-closed-width;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: 0 auto;
  background-color: #fff;

  &.hidden-chrome {
    left: 0;
  }

  .navbar-right {
    margin-right: 0;
  }
}

  .app-wrapper-panel {
    .flex-parent(@shrink: 0);
    box-shadow: -4px 0px 3px rgba(0,0,0,0.2);
  }
